import {useTheme} from "vuetify";


const config = {
    index: 0,
    themes:[],
    Global_Theme: null
}
const theme = {
    light: {
        name: "light"
    },
    dark: {
        name: "dark"
    }
}

export const handoff_light = () => {
    handoff("light")
}

export const handoff_dark = () => {
    handoff("dark")
}


export const showThemesConfig = () => {
    console.log(config)
}

export const handoff_next = () => {
    if (config.index >= config.themes.length - 1) {
        config.index = 0
    } else {
        config.index++
    }
    handoff(config.themes[config.index].name)
}

const getTheme = (themeName) => {
    return theme[themeName].name
}

const handoff = (themeName) => {
    let root = document.getElementById("root")
    for (let i = 0; i < root.attributes.length; i++) {
        if (root.attributes[i].nodeName === "data-theme") {
            root.attributes[i].nodeValue = getTheme(themeName)
            config.Global_Theme.global.name.value = getTheme(themeName)
        }
    }
}

export const init = () => {
    config.Global_Theme = useTheme()
    for (let key in theme) {
        config.themes.push(theme[key])
    }
}